<template>
  <div class="base-echart-box" :style="{ width: width, height: height }">
    <div ref="echartDivRef" class="base-echart"></div>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  onMounted,
  defineProps,
  withDefaults,
  watchEffect,
  defineEmits,
  computed,
} from "vue";
import { EChartsOption } from "echarts";
import useEchart from "./useEcharts";

// 定义props
const props = withDefaults(
  defineProps<{
    options: EChartsOption;
    width?: string;
    height?: string;
    mode?: string;
  }>(),
  {
    width: "100%",
    height: "100%",
    mode: "vintage",
  }
);

const emits = defineEmits(["echartClick"]);

const echartDivRef = ref();

onMounted(() => {
  const { setOptions, echartInstance } = useEchart(echartDivRef.value, props.mode);

  watchEffect(() => {
    setOptions(props.options);
  });
  //图表项点击
  echartInstance.on("click", (param) => {
    param.title = props.options.title.text;
    emits("echartClick", param);
  });
});
</script>
<style lang="less">
.base-echart-box {
  padding: 14px 24px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  min-height: 200px;
  .base-echart {
    width: 100%;
    height: 100%;
  }
}
</style>
